<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Canvas</title>
    <style></style>
  </head>
  <body>
    <div class="container">
      <canvas id="demo"></canvas>
    </div>

    <script>
      ;(function () {
        const $canvas = document.querySelector('#demo')
        $canvas.width = 600
        $canvas.height = 600
        $canvas.style.border = '1px solid #cccccc'

        const context = $canvas.getContext('2d')

        function drawRect() {
          // 绘制矩形
          // 参数，开始坐标，矩形宽高
          context.rect(100, 100, 200, 100)
          context.stroke()

          // 上面两条可以合并为一条
          // 描边矩形
          context.strokeRect(300, 300, 200, 100)

          // 填充矩形
          context.fillRect(400, 400, 200, 100)

          // 清除矩形（画一个矩形，矩形区域内的内容删除）
          context.clearRect(400, 400, 50, 50)
        }

        // drawRect()

        // 绘制弧度
        function drawArc() {
          // 可以从圆心点开始绘制
          context.moveTo(50, 50)

          // true 逆时针，false 顺时针
          context.arc(
            50,
            50,
            50,
            (Math.PI / 180) * 0,
            (Math.PI / 180) * 30,
            true
          )
          context.closePath()
          context.stroke()
        }

        // drawArc()

        // 绘制扇区
        const sectionData = [
          {
            value: 0.2,
            color: 'red',
          },
          {
            value: 0.3,
            color: 'yellow',
          },
          {
            value: 0.4,
            color: 'blue',
          },
          {
            value: 0.1,
            color: 'green',
          },
        ]

        function drawSection() {
          // 竖直上方是 270度
          let currentDeg = 270
          return function (color, value) {
            context.beginPath()
            // 可以从圆心点开始绘制
            context.moveTo(300, 300)

            let temp = currentDeg + value * 360

            if (temp > 360) {
              temp = temp - 360
            }

            // true 逆时针，false 顺时针
            context.arc(
              300,
              300,
              100,
              (Math.PI / 180) * currentDeg,
              (Math.PI / 180) * temp,
              false
            )
            context.closePath()
            context.stroke()
            context.fillStyle = color

            context.fill()

            currentDeg = temp
          }
        }

        const fn = drawSection()
        sectionData.forEach((item) => {
          fn(item.color, item.value)
        })
      })()
    </script>
  </body>
</html>
